<template>
  <div>
    <el-container>
      <el-container>
        <el-aside class="manage-aside">
          <div class="button-group">
            <DepartmentButtons ref="departmentButtons" />
          </div>
          <DepartmentTree
            ref="departmentTree"
            :checkedType="false"
            @e-child="setCheckedData"
          />
        </el-aside>
        <el-container>
          <el-main class="manage-main">
            <PeopleList />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import DepartmentTree from "./components/departmentTree.vue";
import PeopleList from "./components/peopleList.vue";
import DepartmentButtons from "./components/departmentButtons.vue";

export default {
  data() {
    return {
      type: "2",
      checkedData: [],
    };
  },
  components: {
    DepartmentTree,
    PeopleList,
    DepartmentButtons,
  },
  watch: {
    type(val) {
      this.$refs.departmentButtons.form.type = val;
      this.$refs.departmentTree.type = val;
      this.$refs.departmentTree.getDeptTree();
    },
  },
  methods: {
    setCheckedData(val) {
      this.checkedData = val;
    },
  },
};
</script>

<style scoped>
.el-aside {
  line-height: normal;
}
.manage-aside {
  width: 300px;
  height: 800px;
  background: #fff;
}
.manage-main {
  background: #fff;
  border-left: 1px solid #ddd;
}
.button-group {
  text-align: left;

  margin-bottom: 20px;
}
</style>
